import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { getAllDynamic, subDynamic, delDynamic, zan } from "../../api/api";
import { Input, Button, message } from 'antd';
const { TextArea } = Input;
// import store from '../../store';
import './home.scss'
// @inject((store) => {
//   console.log(store);
//   return {
//     user: store.user,
//   };
// })
@inject('user')


@observer
export default class Home extends Component {
  static displayName = 'Home';

  constructor(props) {
    super(props);
    this.state = {
      txt: '',
      list: []
    };
  }
  async componentWillMount () {
    const res = await getAllDynamic()
    this.setState({list: res.data})
  }
  send = () => {
    if (!this.state.txt) return
    let params = {
      id: parseInt(Math.random() * 10000000),
      txt: this.state.txt,
      ...this.props.user.info
    }
    subDynamic(params).then(async res => {
      message.success(res.msg)
      // this.setState({ list: [params, ...this.state.list]})
      const res1 = await getAllDynamic()
      this.setState({txt: '', list: res1.data})
    })
  }
  zan = i => {
    let list = this.state.list
    let item = list[i]
    let index = item.zan.findIndex(v => { return v === this.props.user.info.account })
    if (index === -1) {
      item.zan.push(this.props.user.info.account)
    } else {
      item.zan.splice(index, 1)
    }
    this.setState({list: list})
    zan(item).then(res => {

    })
  }
  del = i => {
    delDynamic(this.state.list[i]).then(res => {
      message.success(res.msg)
      let list = this.state.list
      list.splice(i, 1)
      this.setState({list: list})
    })
  }

  render() {
    const user = (this.props.user&&this.props.user.info)||{account:'',img:''};
    // console.log(user.bool);
    return (
      <div className="dynamic">
      <div className="input">
        <div>
          <img src={user.img} alt=""/>
          <p>{user.account}</p>
        </div>
        <TextArea value = {this.state.txt} onChange={e => {this.setState({txt: e.target.value.trim()})}} placeholder="说点什么吧" autosize={{ minRows: 3, maxRows: 6 }} />
        <Button type="primary" onClick={this.send}>发表</Button>
      </div>
        {this.state.list.length&&this.state.list.map((v, i) => {
          return (
            <div className="list" key={i}>
              <div className="content">
                <div>
                  <img src={v.img} alt=""/>
                  <span>{v.account}</span>
                </div>
                <p>{v.txt}</p>
                {v.account === user.account? (
                  <Button type="danger" onClick={this.del.bind(this, i)}>删除</Button>
                ): null}
              </div>
              <div className="time">
                <em>{v.date}</em>
                <i onClick={this.zan.bind(this, i)} className={v.zan&&v.zan.includes(user.account)?"active iconfont icon-zan":"iconfont icon-zan"}></i>
                <b>{v.zan&&v.zan.length}</b>
              </div>
            </div>
          )
        })}
        <Link to="/a" className="logo-text">
          aaaaaaaaaaaaaaaaa
        </Link>
      </div>
    );
  }
}
